<template>
  <el-row class="bottom-line">
    <div class="subtitle">
      确认付款银行信息
    </div>
    <el-row class="flex-box" type="flex" justify="space-between" align="top">
      <el-col :lg="11" :md="11" :sm="24">
        <!--<el-card>-->
        <el-form size="small" label-width="120px">
          <el-form-item label="汇款账户名：" class="wid100">
            <el-autocomplete
              v-model="remitBank1.bank_account"
              :fetch-suggestions="querySearch"
              class="wid100"
              placeholder="请输入汇款账户名"
              @select="handleSelect"
            />
          </el-form-item>
          <el-form-item label="汇款银行：">
            <el-input
              v-model="remitBank1.bank_name"
              placeholder="请输入汇款银行"
            />
          </el-form-item>
        </el-form>
        <el-row type="flex" justify="end">
          <el-button v-if="showBankSave" type="primary" size="small" @click="saveBankInfo">保存付款银行
          </el-button>
        </el-row>
        <!--</el-card>-->
      </el-col>

    </el-row>
  </el-row>
</template>

<script>
export default {
  name: 'RemitBank',
  props: {
    advertiser_id: {
      default: 0
    },
    remitBank: {
      type: Object,
      default: () => { return {} }
    }
  },
  data() {
    return {
      // 付款银行信息
      remitBank1: {},
      accountList: []

    }
  },
  computed: {
    // 显示保存付款银行按钮
    showBankSave() {
      const val = this.remitBank1
      if (!this.accountList.length) {
        return true
      }
      let result = true
      this.accountList.forEach(item => {
        if (item.bank_account === val.bank_account) {
          return result = false
        }
      })
      return result
    }
  },
  watch: {
    remitBank(val) {
      if (val) { this.remitBank1 = val }
    }
  },
  mounted() {
    this.getReceiptBankList()
  },
  methods: {
    // 获取汇款银行列表
    getReceiptBankList() {
      const data = { owner_id: this.advertiser_id }
      this.$get('action/BankInformation/find', data)
        .then(res => {
          const list = res.data.map(item => {
            item.value = item.bank_account
            return item
          })
          this.accountList = list || []
        })
    },

    handleSelect(val) {
      this.remitBank1.bank_name = val.bank_name || ''
      if (this.remitBank1.bank_name) {
        this.$emit('remitBankChange', this.remitBank1)
      }
    },
    // 筛选付款银行
    querySearch(queryString, cb) {
      const accountList = this.accountList
      const results = queryString ? accountList.filter(this.createFilter(queryString)) : accountList
      // 调用 callback 返回建议列表的数据
      cb(results)
    },
    createFilter(queryString) {
      return (accountList1) => {
        return (accountList1.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0)
      }
    },
    // 创建汇款银行
    saveBankInfo() {
      const data = {
        owner_id: this.advertiser_id,
        ...this.remitBank1
      }
      if (this.remitBank1.bank_account) {
        this.$post('action/BankInformation/found', data)
          .then(res => {
            this.$message({
              message: res.msg,
              type: 'success'
            })
          })
      } else {
        this.$alert('请先输入汇款账户', '提示', {
          confirmButtonText: '确定'
        })
      }
    }
  }
}
</script>

<style scoped>

</style>
